<template>
  <div>
    <van-cell-group>
      <van-field
        :value="receiver"
        clearable
        label="姓名"
        icon="question-o"
        placeholder="姓名"
      />
      <van-field :value="mobile" label="手机号" placeholder="11位手机号码" />
      <div @click="showPopup">
        <van-field :value="d"  label="所在地区" />
      </div>
      <van-field
        :value="addr"
        label="详细地址"
        placeholder="如楼号/单元/门牌"
      />
      <van-button type="primary"  block>保存收货地址</van-button>
      <van-button  block>删除收货地址</van-button>
    </van-cell-group>
    <van-popup
      :show="show"
      position="bottom"
      custom-style="height: 40%;"
      :close="onClose"
    >
    <div>
      <span></span>
      <span  @click="onClose">确定</span>
      <van-area :area-list="newAddressList" />
    </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  
  data() {
    return {
      show: false,
      id:0,
      addr:'',
      receiver:'',
      mobile:'',
      province:'',
      city:'',
      area:''
    };
  },
  methods:{
    showPopup() {
     this.show=true
  },
  onClose() {
    this.show=false
  },
  }
};
</script>

<style></style>
